<template> 
  <!-- 自己的组件库 -->
  <!-- <pig-button />  -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div class="links">
    <RouterLink exact-active-class="active" to="/todolist">todolist</RouterLink>
    <RouterLink exact-active-class="active" to="/page1">page1</RouterLink>
    <RouterLink exact-active-class="active" to="/page2">1000,000</RouterLink>
    <RouterLink exact-active-class="active" to="/page3">拖拽</RouterLink>
    <RouterLink exact-active-class="active" to="/page4">接口响应进度(原生XMLHttpRequest)</RouterLink>
    <RouterLink exact-active-class="active" to="/page5">接口响应进度(fetch)</RouterLink>
    <RouterLink exact-active-class="active" to="/page6">函数式弹窗组件(封装命令式组件)</RouterLink>
    <RouterLink exact-active-class="active" to="/page7">ref防抖</RouterLink>
    <RouterLink exact-active-class="active" to="/page8">computed拦截v-model(子组件不直接修改数据 计算属性 做中间层)</RouterLink>
    <RouterLink exact-active-class="active" to="/page9">右键弹出菜单</RouterLink>
    <RouterLink exact-active-class="active" to="/page10">防创改水印</RouterLink>
    <RouterLink exact-active-class="active" to="/page11">useTemplateRef(vue拿dom的另一种方式)</RouterLink>
    <RouterLink exact-active-class="active" to="/page12">less 变量(单个文件里)</RouterLink>
    <RouterLink exact-active-class="active" to="/page13">less 变量(全局配置里)</RouterLink>
   </div>
   <RouterView />
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
.links {
  width: 100%;
  height: 100px;
  overflow: auto;
  text-align: left;
}
a {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
